/*
 * @ddescription: 完善收货地址弹窗
 * @Author: along
 * @Date: 2020-11-09
 * @Last Modified by: along
 * @Last Modified time: 2020-11-09
 */
<template>
    <div v-if="dialogTips">
        <el-dialog
            :visible="dialogTips"
            append-to-body
            width="360px"
            center
            :show-close="false"
            class="accountDialog"
        >
            <div class="wrap">
                <img
                    src="@/assets/image/waring.png"
                    class="accountDialog-logo"
                >
                <p class="accountDialog-title">
                    温馨提示
                </p>
                <div
                    class="zd-dialog-text"
                >
                    为了售后的正常使用,请先去设置退货地址库
                </div>
                <div class="zd-dialog-foot">
                    <el-button
                        type="default"
                        size="medium"
                        @click="dialogTips = false"
                        style="width:120px"
                    >
                        我知道了
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        style="margin-left: 24px;width:120px"
                        @click="fnHandlePage()"
                    >
                        去设置
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'AdressDialog',
    data () {
        return {
            dialogTips: false
        };
    },
    filters: {},
    computed: {
        ...mapState({})
    },
    mounted () {
    },
    methods: {
        /**
         * @description 跳转账户设置
         */
        fnHandlePage () {
            this.close();
            this.$router.push({
                name: 'goodAfterEdit'
            });
        },

        /**
         * @description 打开弹窗
         */
        show () {
            this.dialogTips = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogTips = false;
        }
    }
};
</script>

<style lang="less" scoped>
.zd-dialog-text {
    color: #666;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
}
.zd-dialog-foot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}
.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .accountDialog-logo {
        width: 48px;
        height: 48px;
    }
    .accountDialog-title {
       color: #333333;
       font-weight: 500;
       font-size: 16px;
       margin:  12px 0 20px 0;
    }
}
.zd-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .zd-item {
        display: flex;
        line-height: 14px;
        align-items: center;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        margin-top: 12px;
        .item-content {
            color: rgba(247, 144, 56, 1);
            font-weight: 500;
        }
    }
}
</style>
<style lang="less">
.accountDialog {
    .el-dialog__header {
        display: none;
    }
}
</style>